<template>
  <div class="app-container">
    <!-- 操作按钮区域 -->
    <el-card>
      <el-row justify="space-between">
        <el-col :span="12">
          <el-button type="primary" @click="showAddDialog">
            <el-icon>
              <Plus />
            </el-icon>新增设备
          </el-button>
          <el-button @click="handleBatchImport">
            <el-icon>
              <Upload />
            </el-icon>批量导入
          </el-button>
        </el-col>
        <el-col :span="12" class="text-right">
          <el-input v-model="searchQuery" placeholder="请输入设备名称/编号" clearable style="width: 300px"
            @clear="handleSearchClear">
            <template #append>
              <el-button @click="showAdvancedFilter">高级筛选</el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
    </el-card>

    <el-card class=" mt-2">
      <!-- 设备表格 -->
      <el-table :data="filteredDeviceList" border style="width: 100%" class="device-table"
        :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="deviceId" label="设备编号" align="center" />
        <el-table-column prop="deviceName" label="设备名称" align="center" />
        <el-table-column prop="deviceType" label="设备类型" align="center">
          <template #default="{ row }">
            <el-tag :type="row.deviceType === '视频设备' ? 'success' : 'primary'">
              {{ row.deviceType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="设备状态" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status === '在线' ? 'success' : 'danger'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="location" label="安装位置" align="center" />
        <el-table-column prop="ipAddress" label="IP地址" align="center" />
        <el-table-column prop="lastUpdate" label="最后更新时间" align="center" />
        <el-table-column label="操作" align="center" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="showDetail(row)">详情</el-button>
            <el-button size="small" type="primary" @click="editDevice(row)">编辑</el-button>
            <el-popconfirm title="确认删除该设备吗？" @confirm="deleteDevice(row.deviceId)">
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <el-pagination class="pagination" v-model:current-page="currentPage" v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="totalDevices"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>

    <!-- 新增/编辑设备对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%" :close-on-click-modal="false">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-form :model="deviceForm" label-width="120px">
            <el-form-item label="设备类型" required>
              <el-radio-group v-model="deviceForm.deviceType">
                <el-radio label="门禁设备" />
                <el-radio label="视频设备" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="设备名称" required>
              <el-input v-model="deviceForm.deviceName" placeholder="请输入设备名称" />
            </el-form-item>
            <el-form-item label="设备编号" required>
              <el-input v-model="deviceForm.deviceId" placeholder="请输入设备编号" />
            </el-form-item>
            <el-form-item label="安装位置">
              <el-input v-model="deviceForm.location" placeholder="请输入安装位置" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="网络参数" name="network">
          <el-form :model="deviceForm" label-width="120px">
            <el-form-item label="IP地址" required>
              <el-input v-model="deviceForm.ipAddress" placeholder="请输入IP地址" />
            </el-form-item>
            <el-form-item label="端口号" required>
              <el-input-number v-model="deviceForm.port" :min="1" :max="65535" />
            </el-form-item>
            <el-form-item label="MAC地址">
              <el-input v-model="deviceForm.macAddress" placeholder="请输入MAC地址" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="deviceForm.deviceType === '视频设备' ? '视频参数' : '门禁参数'" name="params">
          <template v-if="deviceForm.deviceType === '视频设备'">
            <el-form :model="deviceForm" label-width="120px">
              <el-form-item label="视频分辨率">
                <el-select v-model="deviceForm.resolution" placeholder="请选择分辨率">
                  <el-option label="720P" value="720P" />
                  <el-option label="1080P" value="1080P" />
                  <el-option label="2K" value="2K" />
                  <el-option label="4K" value="4K" />
                </el-select>
              </el-form-item>
              <el-form-item label="存储天数">
                <el-input-number v-model="deviceForm.storageDays" :min="1" :max="365" />
              </el-form-item>
            </el-form>
          </template>
          <template v-else>
            <el-form :model="deviceForm" label-width="120px">
              <el-form-item label="门禁权限">
                <el-select v-model="deviceForm.accessLevel" placeholder="请选择权限级别">
                  <el-option label="普通权限" value="normal" />
                  <el-option label="高级权限" value="high" />
                  <el-option label="管理员权限" value="admin" />
                </el-select>
              </el-form-item>
            </el-form>
          </template>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </template>
    </el-dialog>

    <!-- 设备详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="设备详情" width="50%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备编号">{{ currentDevice.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ currentDevice.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">{{ currentDevice.deviceType }}</el-descriptions-item>
        <el-descriptions-item label="设备状态">
          <el-tag :type="currentDevice.status === '在线' ? 'success' : 'danger'">
            {{ currentDevice.status }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="安装位置">{{ currentDevice.location }}</el-descriptions-item>
        <el-descriptions-item label="IP地址">{{ currentDevice.ipAddress }}</el-descriptions-item>
        <el-descriptions-item label="最后更新时间">{{ currentDevice.lastUpdate }}</el-descriptions-item>
        <template v-if="currentDevice.deviceType === '视频设备'">
          <el-descriptions-item label="视频分辨率">{{ currentDevice.resolution || '-' }}</el-descriptions-item>
          <el-descriptions-item label="存储天数">{{ currentDevice.storageDays || '-' }}天</el-descriptions-item>
        </template>
        <template v-else>
          <el-descriptions-item label="门禁权限">{{ formatAccessLevel(currentDevice.accessLevel) }}</el-descriptions-item>
        </template>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Plus, Upload } from '@element-plus/icons-vue'

// 设备数据
const deviceList = ref([
  {
    deviceId: 'AC-20230001',
    deviceName: '1号门禁',
    deviceType: '门禁设备',
    status: '在线',
    location: '水厂东门',
    ipAddress: '192.168.1.101',
    lastUpdate: '2023-05-15 08:30:45',
    accessLevel: 'normal'
  },
  {
    deviceId: 'VC-20230002',
    deviceName: '1号摄像头',
    deviceType: '视频设备',
    status: '在线',
    location: '水厂中控室',
    ipAddress: '192.168.1.102',
    lastUpdate: '2023-05-15 09:15:22',
    resolution: '1080P',
    storageDays: 30
  },
  // 其他设备数据...
])

// 搜索和分页
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const totalDevices = computed(() => deviceList.value.length)

// 过滤后的设备列表
const filteredDeviceList = computed(() => {
  let list = deviceList.value
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    list = list.filter(
      item =>
        item.deviceName.toLowerCase().includes(query) ||
        item.deviceId.toLowerCase().includes(query)
    )
  }
  return list.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  )
})

// 对话框相关
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const dialogTitle = ref('新增设备')
const activeTab = ref('basic')
const currentDevice = ref({})
const deviceForm = ref({
  deviceType: '门禁设备',
  deviceName: '',
  deviceId: '',
  location: '',
  ipAddress: '',
  port: 8000,
  macAddress: '',
  resolution: '1080P',
  storageDays: 30,
  accessLevel: 'normal'
})

// 显示新增对话框
const showAddDialog = () => {
  dialogTitle.value = '新增设备'
  deviceForm.value = {
    deviceType: '门禁设备',
    deviceName: '',
    deviceId: '',
    location: '',
    ipAddress: '',
    port: 8000,
    macAddress: '',
    resolution: '1080P',
    storageDays: 30,
    accessLevel: 'normal'
  }
  activeTab.value = 'basic'
  dialogVisible.value = true
}

// 编辑设备
const editDevice = (row) => {
  dialogTitle.value = '编辑设备'
  deviceForm.value = JSON.parse(JSON.stringify(row))
  activeTab.value = 'basic'
  dialogVisible.value = true
}

// 显示详情
const showDetail = (row) => {
  currentDevice.value = row
  detailDialogVisible.value = true
}

// 删除设备
const deleteDevice = (id) => {
  deviceList.value = deviceList.value.filter(item => item.deviceId !== id)
}

// 提交表单
const submitForm = () => {
  // 这里应该有表单验证
  if (dialogTitle.value === '新增设备') {
    deviceList.value.push(deviceForm.value)
  } else {
    const index = deviceList.value.findIndex(item => item.deviceId === deviceForm.value.deviceId)
    if (index !== -1) {
      deviceList.value[index] = deviceForm.value
    }
  }
  dialogVisible.value = false
}

// 分页变化
const handleSizeChange = (val) => {
  pageSize.value = val
}
const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 搜索清除
const handleSearchClear = () => {
  searchQuery.value = ''
}

// 高级筛选
const showAdvancedFilter = () => {
  // 实现高级筛选逻辑
}

// 格式化权限显示
const formatAccessLevel = (level) => {
  const levels = {
    normal: '普通权限',
    high: '高级权限',
    admin: '管理员权限'
  }
  return levels[level] || level
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.operation-bar {
  margin-bottom: 20px;
}

.device-table {
  margin-bottom: 20px;
}

.pagination {
  justify-content: flex-end;
  margin-top: 20px;
}

.text-right {
  text-align: right;
}
</style>